<template>
    <van-nav-bar
      title="健康档案"
      left-arrow
      @click-left="goBack"
      class="main-nav-bar"
    >
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>
    <div class="health-record">
      <!-- 头部信息 -->
      <div class="header-card">
      <div class="patient-info">
        <div class="base-info">
          <h2 class="name">{{ counterStore.useStore.userName }}</h2>
          <van-button type="primary" size="mini" class="follow-btn">关注</van-button>
        </div>
        <div class="detail-info">
          <!-- 性别显示使用三元表达式转换 -->
          <span class="gender-age">{{ counterStore.useStore.sex === '男' ? '♂男' : '♀女'}} {{ counterStore.useStore.age }}岁</span>
          <span class="phone">{{ counterStore.useStore.phone }}</span>
          <!-- 原有标签逻辑保持不变 -->
        </div>
        <div class="address">{{ patientData?.address }}</div>
      </div>
    </div>
  
      <!-- 指标选项卡 -->
      <div class="indicator-tabs">
        <div
          v-for="tab in tabs"
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
        </div>
      </div>
  
      <!-- 测量数据 -->
      <div class="measure-card">
        <!-- 血压测量 -->
        <div v-if="activeTab === 'bloodPressure'" class="measure-section">
          <div class="measure-header">
            <span class="title">最近测量日期</span>
            <span class="time">{{ formattedCreateTime }}</span>
            <van-tag type="danger" plain>异常</van-tag>
          </div>
  
          <div class="measure-results">
            <div class="result-item">
              <div class="value">{{ patientData?.systolicPressure }}<small>mmHg</small></div>
              <div class="label">收缩压(SBP)</div>
            </div>
            <div class="result-item">
              <div class="value">{{ patientData?.siastolicPressure }}<small>mmHg</small></div>
              <div class="label">舒张压(DBP)</div>
            </div>
            <!-- <div class="result-item">
              <div class="value">67<small>次/分钟</small></div>
              <div class="label">心率(HR)</div>
            </div> -->
          </div>
  
          <div class="data-table">
            <div class="row header">
              <div class="col">类别</div>
              <div class="col">舒张压</div>
              <div class="col">收缩压</div>
            </div>
            <div class="row">
              <div class="col">记录次数</div>
              <div class="col">3</div>
              <div class="col">3</div>
            </div>
            <div class="row">
              <div class="col">平均值</div>
              <div class="col">122</div>
              <div class="col">87</div>
            </div>
            <div class="row">
              <div class="col">最高值</div>
              <div class="col">146</div>
              <div class="col">98</div>
            </div>
            <div class="row">
              <div class="col">最低值</div>
              <div class="col">120</div>
              <div class="col">80</div>
            </div>
            <div class="row">
              <div class="col">达标率</div>
              <div class="col">87.56%</div>
              <div class="col">78.45%</div>
            </div>
          </div>
        </div>
  
        <!-- 其他测量项可在此扩展 -->
        <!-- 血糖测量 -->
        <div v-if="activeTab === 'bloodSugar'" class="measure-section">
          <div class="measure-header">
            <span class="title">最近测量日期</span>
            <span class="time">{{ formattedCreateTime }}</span>
            <van-tag type="success" plain>正常</van-tag>
          </div>
  
          <div class="sugar-results">
            <div class="result-col">
              <div class="value">6.3<small>mmol/L</small></div>
              <div class="label">餐前血糖</div>
            </div>
            <div class="result-col">
              <div class="value">6.6<small>mmol/L</small></div>
              <div class="label">餐后血糖</div>
            </div>
          </div>
  
          <div class="sugar-table">
            <div class="row header">
              <div class="col">类别</div>
              <div class="col">餐前</div>
              <div class="col">餐后</div>
            </div>
            <div class="row">
              <div class="col">记录次数</div>
              <div class="col">3</div>
              <div class="col">3</div>
            </div>
            <div class="row">
              <div class="col">平均值</div>
              <div class="col">6.1</div>
              <div class="col">6.5</div>
            </div>
            <div class="row">
              <div class="col">最高值</div>
              <div class="col">6.5</div>
              <div class="col">6.9</div>
            </div>
            <div class="row">
              <div class="col">最低值</div>
              <div class="col">6.0</div>
              <div class="col">6.4</div>
            </div>
            <div class="row">
              <div class="col">达标率</div>
              <div class="col">100%</div>
              <div class="col">100%</div>
            </div>
          </div>
        </div>
  
        <!-- BMI测量 -->
        <div v-if="activeTab === 'bmi'" class="measure-section">
          <div class="measure-header">
            <span class="title">最近测量日期</span>
            <span class="time">{{ formattedCreateTime }}</span>
            <van-tag type="success" plain>正常</van-tag>
          </div>
  
          <div class="bmi-results">
            <div class="data-row">
              <span class="label">体重</span>
              <span class="value">64kg</span>
            </div>
            <div class="data-row">
              <span class="label">身高</span>
              <span class="value">168cm</span>
            </div>
            <div class="data-row highlight">
              <span class="label">BMI</span>
              <span class="value">24.1</span>
            </div>
          </div>
        </div>
  
        <!-- 腰围测量 -->
        <div v-if="activeTab === 'waistline'" class="measure-section">
          <div class="measure-header">
            <span class="title">最近测量日期</span>
            <span class="time">{{ formattedCreateTime }}</span>
            <van-tag type="success" plain>正常</van-tag>
          </div>
  
          <div class="waistline-result">
            <div class="main-value">{{ patientData?.waistline }}<small>cm</small><small>cm</small></div>
          </div>
        </div>
      </div>
  
      <!-- 功能按钮 -->
      <div class="action-buttons">
        <van-button
          v-for="btn in buttons"
          :key="btn.label"
          class="action-btn"
          @click="handleAction(btn.action)"
        >
          {{ btn.label }}
        </van-button>
      </div>
    </div>
    <!-- 拨打电话 -->
    <van-popup
      v-model:show="showCallPopup"
      position="bottom"
      :style="{ height: '30%' }"
      round
      class="call-popup"
    >
      <div class="popup-content">
        <div class="popup-header">拨打电话</div>
        <div class="phone-number">{{ patientData?.phone }}</div>
        <div class="popup-buttons">
          <van-button block class="cancel-btn" @click="showCallPopup = false"
            >取消</van-button
          >
          <van-button block type="primary" class="call-btn" @click="makeCall"
            >拨打</van-button
          >
        </div>
      </div>
    </van-popup>
    <!--复诊提醒-->
    <van-popup
      v-model:show="showRemindPopup"
      position="bottom"
      :style="{ height: '50%' }"
      round
      class="remind-popup"
    >
      <div class="popup-content">
        <div class="popup-header">复诊提醒</div>
        <van-form class="remind-form">
          <van-field
            v-model="formData.time"
            label="复诊时间"
            placeholder="选择时间"
            readonly
            is-link
            @click="showDatePicker = true"
          />
          <van-field
            v-model="formData.hospital"
            label="复诊医院"
            placeholder="请输入医院名称"
          />
          <van-field
            v-model="formData.department"
            label="复诊科室"
            placeholder="请输入科室名称"
          />
          <van-field
            v-model="formData.content"
            label="复诊内容"
            placeholder="请输入提醒内容"
            type="textarea"
            autosize
          />
        </van-form>
        <div class="popup-buttons">
          <van-button block class="cancel-btn" @click="showRemindPopup = false"
            >取消</van-button
          >
          <van-button
            block
            type="primary"
            class="submit-btn"
            @click="submitRemind"
            >发送</van-button
          >
        </div>
      </div>
    </van-popup>
  <!-- 在template中添加转诊弹窗 -->
  <van-popup
    v-model:show="showTransferPopup"
    position="bottom"
    :style="{ height: '55%' }"
    round
    class="transfer-popup"
  >
    <div class="popup-content">
      <div class="popup-header">转诊</div>
      
      <!-- 转诊类型 -->
      <div class="form-row">
        <el-select 
          v-model="transferForm.type"
          placeholder="请选择"
          class="element-select"
        >
          <el-option
            v-for="item in transferOptions.type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
  
      <!-- 转诊原因 -->
      <div class="form-row">
        <el-select 
          v-model="transferForm.reason"
          placeholder="请选择"
          class="element-select"
        >
          <el-option
            v-for="item in transferOptions.reason"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
  
      <!-- 接收机构 -->
      <div class="form-row">
        <el-select 
          v-model="transferForm.hospital"
          placeholder="请选择"
          class="element-select"
        >
          <el-option
            v-for="item in transferOptions.hospital"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
  
      <!-- 接收科室 -->
      <div class="form-row">
        <el-select 
          v-model="transferForm.department"
          placeholder="请选择"
          class="element-select"
        >
          <el-option
            v-for="item in transferOptions.department"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
  
      <div class="popup-buttons">
        <van-button block class="cancel-btn" @click="showTransferPopup = false">取消</van-button>
        <van-button block type="primary" class="send-btn" @click="submitTransfer">发送</van-button>
      </div>
    </div>
  </van-popup>
    <!--复诊时间弹出框-->
    <el-dialog
      v-model="showDatePicker"
      title="选择复诊时间"
      width="90%"
      align-center
      class="date-picker-dialog"
    >
      <el-date-picker
        v-model="currentDate"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD"
        @change="handleDateChange"
      />
      <template #footer>
        <el-button @click="showDatePicker = false">取消</el-button>
        <el-button type="primary" @click="confirmDate">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { Popup } from 'vant';
  import { DatePicker } from 'vant';
  import { useRouter } from 'vue-router';
  import { useCounterStore } from '@/stores/counter';
  const counterStore = useCounterStore();
  import { computed } from 'vue';
  import axios from 'axios';
  import { useRoute } from 'vue-router';
  
  const route = useRoute();
  const showTransferPopup = ref(false);
  // 当前激活的选项卡
  const activeTab = ref('bloodPressure');
  
  const router = useRouter();
  // 获取参数
  const patientId = route.params.id;
  const patientName = route.query.name;
  const patientPhone = route.query.phone;
  
  
  // 患者详情数据
  const patientData = ref(null);
  
  // 在组件挂载时获取患者详情
  onMounted(async () => {
    try {
      const response = await axios.get(
        'http://localhost:5223/api/Medical/ResidentFilesmoveQuery', 
        {
          params: {
            ResidentFiles_Name: route.query.name,
            Phone: route.query.phone
          }
        }
      );
      
      if (response.data.code === 210 && response.data.data?.length > 0) {
        patientData.value = response.data.data[0];
      } else {
        console.error('未找到患者数据');
        router.back(); // 返回列表页
      }
    } catch (error) {
      console.error('获取数据失败:', error);
      router.back();
    }
  });
  
  // 日期
  const formattedCreateTime = computed(() => {
    if (!patientData.value?.createTime) return '';
    
    const date = new Date(patientData.value.createTime);
    
    // 方案1：原生JS处理
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
  
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  
  });
  
  
  // 选项卡配置
  const tabs = [
    { label: '血压', key: 'bloodPressure' },
    { label: '血糖', key: 'bloodSugar' },
    { label: 'BMI', key: 'bmi' },
    { label: '腰围', key: 'waistline' }
  ];
  
  // 功能按钮配置
  const buttons = [
    { label: '一键呼叫', action: 'call' },
    { label: '复诊提醒', action: 'remind' },
    { label: '转诊', action: 'transfer' },
    { label: '随访', action: 'followUp' }
  ];
  // 日期选择弹出框显示状态
  const showRemindPopup = ref(false);
  const showDatePicker = ref(false);
  const currentDate = ref(new Date());
  
  const formData = ref({
    time: '',
    hospital: '',
    department: '',
    content: ''
  });
  
  
  
  // 呼叫弹窗显示状态
  const showCallPopup = ref(false);
  
  //拨打电话
  const makeCall = () => {
  };
  
  // 按钮点击处理
  const handleAction = (action) => {
    if (action === 'call') {
      showCallPopup.value = true;
    } else if (action === 'remind') {
      showRemindPopup.value = true;
    } else if (action === 'transfer') {
      showTransferPopup.value = true;
    } else if (action === 'followUp') {
      // 添加参数传递
      if (patientData.value) {
        router.push({
          name: 'FollowInfo',
          query: {
            id: patientData.value.residentFiles_Id,
            name: patientData.value.residentFiles_Name,
            createTime: patientData.value.createTime
          }
        });
      }
    }
  };
  
  // 日期选择变化处理
  const handleDateChange = (date) => {
    currentDate.value = date;
  };
  // 确认日期选择
  const confirmDate = () => {
    if (currentDate.value) {
      formData.value.time = currentDate.value;
    }
    showDatePicker.value = false;
  };
  // 提交复诊提醒
  const submitRemind = () => {
    console.log('提交复诊提醒:', formData.value);
    showRemindPopup.value = false;
    // 这里可以添加提交表单的逻辑
  };
  
  
  // 新增提交方法
  const submitTransfer = () => {
    console.log('提交转诊:', transferForm.value);
    showTransferPopup.value = false;
    // 这里可以添加实际的提交逻辑
  };
  // 新增选项配置
  const transferOptions = ref({
    type: [
      { label: '门诊', value: 'outpatient' },
      { label: '住院', value: 'hospitalization' }
    ],
    reason: [
      { label: '手术', value: 'surgery' },
      { label: '检查', value: 'examination' }
    ],
    hospital: [
      { label: 'XX中心医院', value: 'center' },
      { label: '其他医院', value: 'other' }
    ],
    department: [
      { label: '心内科', value: 'cardiology' },
      { label: '其他科室', value: 'other' }
    ]
  });
  
  // 转诊表单数据
  const transferForm = ref({
    type: '',
    reason: '',
    hospital: '',
    department: ''
  });
  // 返回上一页
  const goBack = () => {
    router.push('/Setup');
  };
  </script>
  
  <style scoped>
  .main-nav-bar {
    :deep(.van-nav-bar__title) {
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }
  
    :deep(.van-icon-arrow-left) {
      color: #333;
    }
  
    :deep(.van-nav-bar__content) {
      height: 48px;
    }
  }
  .health-record {
    background: #f5f5f5;
    min-height: 100vh;
    padding: 12px;
    padding-bottom: 88px; /* 新增：为底部按钮预留空间 */
  }
  
  /* 头部卡片 */
  .header-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .base-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .name {
    font-size: 18px;
    margin-right: 12px;
  }
  
  .detail-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .address {
    color: #666;
    font-size: 14px;
  }
  
  /* 指标选项卡 */
  .indicator-tabs {
    display: flex;
    background: white;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 12px;
    color: #666;
    border-radius: 6px;
    transition: all 0.3s ease;
  
    &.active {
      background: #f0f7ff;
      color: #1989fa;
      font-weight: 500;
    }
  }
  
  /* 测量卡片 */
  .measure-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .measure-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
  }
  
  .measure-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
  }
  
  .result-item {
    text-align: center;
    .value {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      small {
        font-size: 12px;
        color: #666;
      }
    }
    .label {
      font-size: 12px;
      color: #666;
    }
  }
  
  /* 血压表格样式-与血糖表格保持完全一致 */
  .data-table {
    width: 100%;
    margin: 26px 0 40px;
    font-size: 15px;
    color: #333;
  
    /* 网格布局 */
    .row {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr; /* 首列稍宽 */
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #eee;
  
      &.header {
        background: #f8f8f8;
        border-bottom: 2px solid #ddd;
        font-weight: 600;
        padding: 16px 0;
      }
  
      &:last-child {
        border-bottom: none;
      }
    }
  
    .col {
      padding: 0 12px;
      text-align: center;
  
      &:first-child {
        text-align: left;
        padding-left: 24px; /* 保持与血糖表格相同的缩进 */
      }
    }
  
    /* 数值特殊样式 */
    .col:not(:first-child) {
      font-family: DIN Alternate, Arial;
      font-size: 16px;
      color: #444;
    }
  }
  
  /* 功能按钮 */
  .action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 16px;
    /* 新增固定定位样式 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 100;
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }
  .action-btn {
    flex: 1;
    border-radius: 20px;
    background: #f8f8f8;
    border: none;
    color: #333;
    font-size: 14px;
    height: 40px; /* 统一按钮高度 */
  
    /* 新增按钮间分割线 */
    &:not(:last-child) {
      margin-right: 6px;
    }
  
    &:active {
      background: #e0e0e0;
    }
  }
  
  /* 血糖专用样式 */
  .sugar-results {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  
    .result-col {
      flex: 1;
      text-align: center;
      padding: 16px;
      background: #f8f8f8;
      border-radius: 8px;
  
      .value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        small {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  
  .sugar-table {
    .row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: 12px 0;
      border-bottom: 1px solid #eee;
  
      &.header {
        font-weight: 500;
        background: #f8f8f8;
      }
  
      .col {
        text-align: center;
        padding: 8px;
      }
    }
  }
  
  /* BMI专用样式 */
  .bmi-results {
    .data-row {
      display: flex;
      justify-content: space-between;
      padding: 16px;
      margin-bottom: 8px;
      background: #f8f8f8;
      border-radius: 8px;
  
      &.highlight {
        background: #e8f5e9;
        .value {
          color: #07c160;
          font-weight: bold;
        }
      }
    }
  }
  
  /* 腰围专用样式 */
  .waistline-result {
    text-align: center;
    padding: 20px 0;
  
    .main-value {
      font-size: 36px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
      small {
        font-size: 16px;
        color: #666;
      }
    }
  
    .reference {
      color: #999;
      font-size: 12px;
    }
  }
  
  /* 新增样式 */
  .call-popup {
    --van-popup-background: #fff;
  
    .popup-content {
      padding: 16px;
      height: 90%;
      display: flex;
      flex-direction: column;
  
      .popup-header {
        font-size: 16px;
        color: #666;
        text-align: center;
        padding-bottom: 12px;
        border-bottom: 1px solid #eee;
      }
  
      .phone-number {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: #333;
        font-weight: 500;
      }
  
      .popup-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
  
        .van-button {
          height: 44px;
          border-radius: 8px;
          font-size: 16px;
        }
  
        .cancel-btn {
          background: #fff;
          border: 1px solid #ee0a24;
          color: #ee0a24;
        }
  
        .call-btn {
          background: #07c160;
          border: none;
        }
      }
    }
  }
  
  /* 新增样式 */
  .remind-popup {
    --van-popup-background: #fff;
  
    .popup-content {
      padding: 16px;
      height: 90%;
      display: flex;
      flex-direction: column;
  
      .popup-header {
        font-size: 16px;
        color: #666;
        text-align: center;
        padding-bottom: 12px;
        border-bottom: 1px solid #eee;
        margin-bottom: 12px;
      }
  
      .remind-form {
        flex: 1;
        overflow-y: auto;
  
        .van-field {
          margin-bottom: 12px;
        }
      }
  
      .popup-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding-top: 12px;
  
        .van-button {
          height: 44px;
          border-radius: 8px;
          font-size: 16px;
        }
  
        .cancel-btn {
          background: #fff;
          border: 1px solid #ee0a24;
          color: #ee0a24;
        }
  
        .submit-btn {
          background: #07c160;
          border: none;
        }
      }
    }
  }
  
  /* 添加日期选择器样式调整 */
  :deep(.van-picker) {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  
  :deep(.van-picker__toolbar) {
    height: 44px;
  }
  
  :deep(.van-picker__confirm) {
    color: #07c160;
  }
  .date-picker-dialog {
    :deep(.el-dialog__body) {
      padding: 20px;
    }
  
    :deep(.el-date-picker) {
      width: 100%;
      margin: 0 auto;
    }
  
    :deep(.el-picker-panel) {
      width: 100%;
    }
  
    :deep(.el-button) {
      border-radius: 8px;
      padding: 12px 24px;
    }
  
    :deep(.el-button--primary) {
      background: #07c160;
      border-color: #07c160;
    }
  }
  
  /* 转诊 */
  /* 在style中添加样式 */
  .transfer-popup {
    --van-popup-background: #fff;
  
    .popup-content {
      padding: 16px;
      height: 90%;
      display: flex;
      flex-direction: column;
  
      .popup-header {
        font-size: 16px;
        color: #333;
        text-align: center;
        padding-bottom: 12px;
        margin-bottom: 16px;
        border-bottom: 1px solid #eee;
      }
  
      .form-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 12px;
  
        .label {
          width: 80px;
          font-size: 14px;
          color: #666;
        }
  
        .van-dropdown-menu {
          flex: 1;
          --van-dropdown-menu-title-font-size: 14px;
        }
      }
  
      .popup-buttons {
        margin-top: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding-top: 20px;
  
        .van-button {
          height: 44px;
          border-radius: 8px;
          font-size: 16px;
        }
  
        .cancel-btn {
          background: #fff;
          border: 1px solid #ee0a24;
          color: #ee0a24;
        }
  
        .send-btn {
          background: #1989fa;
          border: none;
        }
      }
    }
  }
  </style>
  